<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>商品</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <!--<modal v-model="uploadFlag" title="商品照片" >
        <i-form :label-width="80">
            <form-item label="商品照片:">
                <upload  action="" name="" :before-upload="doBeforeUpload">
                    <i-button icon="ios-cloud-upload-outline">请选择..</i-button>
                </upload>
                <div class="img" :style="{'background-image':'url('+img+')'}" v-if="img"></div>
            </form-item>
            <form-item label="照片描述:">
                <i-input type="textarea" v-model="uploadForm.attachDescr"/>
            </form-item>
        </i-form>
    </modal>-->
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form ref="goodsVo" :model="goodsVo" inline :label-width="80">
                    <form-item label="商品名称:"prop="name">
                        <i-input type="text" v-model="goodsVo.name"/>
                    </form-item>
                    <form-item label="商品类型:"prop="goodsTypeid">
                        <i-select v-model="goodsVo.goodsTypeid" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in goodsTypeList" :value="item.id" :key="item.id">{{item.goodsTpname}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="创建日期:">
                        <row>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="goodsVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px"  ></date-picker></col>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="goodsVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" ></date-picker></col>
                        </row>
                    </form-item>

                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchGoodsList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="goodsVo={};searchGoodsList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <shiro:hasPermission name="sp:add">
            <i-button type="success"@click="toAdd"icon="md-add" >添加商品</i-button>
        </shiro:hasPermission>
    </card>

    <i-table :columns="columns" :data="pageResult.rows" :height="300" border stripe  @on-selection-change="tableSelection=arguments[0]">

        <template slot-scope="{row}" slot="goodsTpname">
            <span>{{ row.goodsType.goodsTpname}}</span>
        </template>
        <template slot-scope="{row}" slot="providerId">
            <span>{{ row.provider.proName}}</span>
        </template>
        <template slot-scope="{row,index}"  slot="action">
            <shiro:hasPermission name="sp:update">
                <i-button type="warning" @click="toUpdate(row)" size="small">修 改</i-button>
            </shiro:hasPermission>
            <shiro:hasPermission name="sp:del">
                <i-button type="error" @click="del(row,index)" size="small">删 除</i-button>
            </shiro:hasPermission>
        <!--    <shiro:hasPermission name="sp:upload">
                <i-button type="info" size="small" @click="toUpload(row)">上传工作照</i-button>
            </shiro:hasPermission>-->
        </template>
    </i-table>

    <modal v-model="updateFlag" title="修改商品" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
          <!--  <form-item label="商品编码">
                <i-input v-model="goods.code" size="large"/>
            </form-item>-->
            <form-item label="商品名称">
                <i-input v-model="goods.name" size="large"/>
            </form-item>
            <form-item label="商品类型:">
                <i-select  v-model="goods.goodsTypeid" style="width: 110px" filterable>
                    <i-Option v-for="item in goodsTypeList" :value="item.id" :key="item.id">{{item.goodsTpname}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="厂家:">
                <i-select v-model="goods.providerId" style="width: 110px" filterable>
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="商品描述">
                <i-input v-model="goods.spdesc" size="large"/>
            </form-item>
            <form-item label="商品单位">
                <i-input v-model="goods.unit" size="large"/>
            </form-item>
            <form-item label="采购价格">
                <i-input v-model="goods.purchasePrice" size="large"/>
            </form-item>
            <form-item label="销售价格">
                <i-input v-model="goods.sellingPrice" size="large"/>
            </form-item>
            <form-item label="产地">
                <i-input v-model="goods.producer" size="large"/>
            </form-item>
            <!--<form-item label="修改时间">
                <%--<date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate" size="large"/>--%>
                <%-- <date-picker type="datetime" format="yyyy-MM-dd HH:mm" :value="role.modifyDate" size="large"/>--%>
                <date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="goods.modifyDate" size="large"/>
                <%--<i-input  v-model="role.modifyDate" size="large"/>--%>
            </form-item>-->
        </i-form>
    </modal>
    <modal v-model="addFlag" title="添加商品" >
        <i-form ref="goods" :model="goods" :label-width="80"  :rules="ruleValidate" >
            <form-item label="商品编码" prop="code">
                <i-input v-model="goods.code" size="large"/>
            </form-item>
            <form-item label="商品名称"prop="name">
                <i-input v-model="goods.name" size="large"/>
            </form-item>
            <form-item label="商品类型:"prop="goodsTypeid">
                <i-select v-model="goods.goodsTypeid" style="width: 110px" filterable>
                    <i-Option v-for="item1 in goodsTypeList" :value="item1.id" :key="item1.id">{{item1.goodsTpname}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="厂家:"prop="providerId">
                <i-select v-model="goods.providerId" style="width: 110px" filterable>
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="商品描述"prop="spdesc">
                <i-input v-model="goods.spdesc" size="large"/>
            </form-item>
            <form-item label="商品单位"prop="unit">
                <i-input v-model="goods.unit" size="large"/>
            </form-item>
            <form-item label="采购价格"prop="purchasePrice">
                <i-input v-model="goods.purchasePrice" size="large" type="number"/>
            </form-item>
            <form-item label="销售价格"prop="sellingPrice">
                <i-input v-model="goods.sellingPrice" size="large" type="number"/>
            </form-item>
            <form-item label="创建日期"prop="creationDate">
                <%--<date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate" size="large"/>--%>
                <%-- <date-picker type="datetime" format="yyyy-MM-dd HH:mm" :value="role.modifyDate" size="large"/>--%>
                <date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="goods.creationDate" size="large"/>
                <%--<i-input  v-model="role.modifyDate" size="large"/>--%>
            </form-item>
            <form-item label="产地"prop="code">
                <i-input v-model="goods.producer" size="large"/>
            </form-item>
            <i-button  type="primary" @click="add('goods')" style="margin-left: 300px">提交</i-button>
            <i-button  type="error" @click="cancleSubmit('goods')" >取消</i-button>
        </i-form>
        <div slot="footer">
        </div>
    </modal>
    <%--<Page :total="pageResult.total" :page-size="pageSize" @on-change="changePageNo"/>--%>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
        @on-change="pageNo=arguments[0];searchGoodsList();"
    <%--:current.sync="pageNo"-->
<%-- @on-change="searchUserList"--%>

         show-sizer
         :page-size-opts="[5,10,15]"
   <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchGoodsList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
               //{type:"selection",width:60,align:"center"},
                {key:"id",title:"商品编号",width:80},
                {key:"code",title:"商品编码",width:120},
                {key:"name",title:"商品名称",width:80},
                {slot:"goodsTpname",title:"商品类型",width:80},
                {key:"spdesc",title:"商品描述"},
                {key:"unit",title:"商品单位",width:80},
                {key:"purchasePrice",title:"采购价格",width:80},
                {key:"sellingPrice",title:"销售价格",width:80},
                {key:"creationDate",title:"创建日期",width:130,align:"center"},
                {key:"producer",title:"产地",align:"center"},
                {slot:"providerId",title:"厂家"},
                {title:"操作",slot:"action"}
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            goodsVo:{},
            goodsTypeList:[],
            providerList:[],
            goods:{},
            tableSelection:[],
            pageNo:1,
            pageSize:5,
            //uploadFlag:false,
            updateFlag:false,
            addFlag:false,

            ruleValidate: {
                code: [
                    {required: true, message: '请输入商品编码', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入商品名称', trigger: 'blur'}
                ],
                spdesc: [
                    {required: true, message: '请输入商品描述', trigger: 'blur'}
                ],
                unit: [
                    {required: true, message: '请输入商品单位',trigger: 'blur'}],
                purchasePrice: [
                    {required: true, message: '请输入采购价格',trigger: 'blur'}],
                sellingPrice: [
                    { required: true, message: '请输入销售价格', trigger: 'blur' },
                ],
                producer: [
                    { required: true, message: '请输入产地', trigger: 'blur' },
                ],
                goodsTypeid: [
                    {required: true, type:'number', message: '请选择商品类型', trigger: 'change'}
                ],
                providerId: [
                    {required: true, type:'number', message: '请选择厂家', trigger: 'change'}
                ],
            },
         /*   uploadForm:{
                id:null,
                attachPath:null,
                attachDescr:null,
            },
            img:null*/
        },
        methods:{
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/search/${this.pageNo}/${this.pageSize}`,{params:this.goodsVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },

            searchGoodsTypeList(){
                axios.get(`${ctx}/jibenxinxi/splx/list`)
                    .then(({data})=>{
                        this.goodsTypeList=data.result;
                    });
            },
            searchProviderList(){
                axios.get(`${ctx}/jibenxinxi/gys/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            /*  toUpload(){
                this.uploadFlag=true;
            },*/
         /*   doBeforeUpload(file){
                const reader=new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend=()=>{
                    this.img=reader.result;
                }
            },*/
            toUpdate(row){
                Object.assign(this.goods,row);
                this.updateFlag=true;
            },
            update(){
                /*if(this.goods.creationDate==""){
                    return this.$Message.error('添加失败!请填写日期');
                }*/
                if(this.goods.name==""){
                    return this.$Message.error('添加失败!请填写商品名称');
                }
                if(this.goods.spdesc==""){
                    return this.$Message.error('添加失败!请填写商品描述');
                }
                if(this.goods.unit==""){
                    return this.$Message.error('添加失败!请填写商品单位');
                }
                if(this.goods.purchasePrice==""){
                    return this.$Message.error('添加失败!请填写采购价格');
                }
                if(this.goods.sellingPrice==""){
                    return this.$Message.error('添加失败!请填写销售价格');
                }
                if(this.goods.producer==""){
                    return this.$Message.error('添加失败!请填写产地');
                }
                let params=Qs.stringify(this.goods,{serializeDate:(date)=> {
                        return  moment(date).format("YYYY-MM-DD HH:mm");
                    }});
                axios.post(`${ctx}/jibenxinxi/sp/update`,Qs.parse(params))
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchGoodsList();
                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/jibenxinxi/sp/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                //_this.search();
                                _this.pageResult.rows.splice(index,1);
                            });
                    }
                });
            },
            toAdd(){
                this.goods={ };
                this.addFlag=true;

            },
            add(name){
                this.$refs[name].validate((valid) => {
                        if (valid) {
                        /*    if(this.goods.goodsTypeid==null||this.goods.goodsTypeid<0){
                                return this.$Message.error('添加失败!请选择商品类型');
                            }
                            if(this.goods.providerId==null||this.goods.providerId<0){
                                return this.$Message.error('添加失败!请选择厂家');
                            }*/
                            if(this.goods.creationDate==""){
                                return this.$Message.error('添加失败!请填写日期');
                            }
                            let params=Qs.stringify(this.goods,{serializeDate:(date)=> {
                                    return  moment(date).format("YYYY-MM-DD HH:mm");
                                }});
                axios.post(`${ctx}/jibenxinxi/sp/add`,Qs.parse(params))
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchGoodsList();

                    });
                        }else {
                            this.$Message.error('添加失败!');
                        }
                })
            },
            cancleSubmit(name){
                this.$refs[name].resetFields();
                this.addFlag=false;
            },
        },
        mounted(){
            this.searchGoodsTypeList();
            this.searchGoodsList();
            this.searchProviderList();
        },

    });
</script>
</body>
</html>
